<template>
  <div class="main">
    <div class="recharge">
      <div class="bgpart">
        <div class="recharge pb20">
          <div class="recharge-content f-item baselight2">
            <div class="title">
              Please select the following recharge channel, the wallet address
              will be updated from time to time.
            </div>
            <div class="items">
              <div class="item" v-for="(item, i) in data" :key="item.id" @click="clickItemHandler(i)">
                <div class="left">
                  <img
                      :src="item.icon"
                      class="logo"
                  />
                  <span class="text">{{item.coinType}}-{{item.chainType}}</span>
                </div>
                <img

                    src=""
                    alt=""
                    class="wt40"
                />
              </div>
            </div>
            <div class="items">
              <div class="item">
                <div class="left">
                  <span class="text">Bank wire/zelle</span>
                </div>
                <img

                    src=""
                    alt=""
                    class="wt40"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getAssetsRechargeList} from "@/api/asset";

export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getAssetsRechargeList().then(res => {
        this.data = res.data
      })
    },
    clickItemHandler(i) {
      let datum = this.data[i];
      this.$router.push({path: '/rechargeOpen', query: datum})
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #0B0E11 !important;
}

.wt40 {
  width: 40px;
  height: 40px;
}

.recharge {
  padding-top: 10px;
  width: 1000px;
  margin: 0 auto;
  &-content {
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    padding: 0 30px;
    .title {
      font-size: 16px;
      padding: 30px 0;
    }
    .item {
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 25px 0;
      cursor: pointer;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 25px 0;
      cursor: pointer;
    }
    .left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      .text {
        font-size: 16px;
      }
      .logo {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        border-radius: 50%;
      }
    }
  }
}
</style>
